<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar
      title="问答"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #left>
        <van-icon
          name="arrow-left"
          :size="20"
          color="#aaa"
        />
      </template>
    </van-nav-bar>
    <!-- 页面容器 -->
    <div
      ref="aa"
      class="container"
    >
      <!-- 每一小块内容 -->
      <div
        v-for="(item, i) in data"
        :key="i"
        class="small-container van-hairline--bottom "
      >
        <!-- 左侧内容 -->
        <div class="content">
          <!-- 上方问答内容-->
          <div class="qa van-multi-ellipsis--l2">
            {{ item.title }}
          </div>
          <!-- 下方点赞 评论 时间 -->
          <div class="comments van-ellipsis">
            <span>赞同 {{ item.likeCount > num ? `${num}+`: item.likeCount }}</span>
            <span>评论 {{ item.commentCount > num ? `${num}+` : item.commentCount }}</span>
            <span>{{ time(item.pubTimestamp).fromNow() }}</span>
          </div>
        </div>
        <!-- 右侧图片 -->
        <div class="img">
          <img
            :src="item.thumbSrc"
            alt=""
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: 'QaPage',
  data() {
    return {
      data: new Array(100)
        .fill(0)
        .map(() => ({
          // 标题
          title: '作为IT行业的过来人，你有什么话想对后辈说的？？？？？？？？？',
          // 点赞数 超过999显示为999+
          likeCount: 1234,
          // 评论数 超过999显示为999+
          commentCount: 555,
          // 发布时间
          pubTimestamp: 1658482134742,
          // 缩略图
          thumbSrc: 'https://pic1.zhimg.com/80/v2-8e77b2771314f674cccba5581560d333_xl.jpg?source=4e949a73',
        })),
      num: 999
    };
  },
  computed: {
    time() {
      return moment;
    },
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
}
</script>

<style lang="less" scoped>

.container {
  height: calc(100vh - 46px - 50px);
  overflow: auto;
  padding: 0 20px;
  .small-container {
    display: flex;
    padding: 10px 0;
    img {
      width: 120px;
      height: 100%;
      border-radius: 5px;
    };
    .content {
      flex: 1;
      .qa {
        padding-top: 10px;
        padding-right: 10px;
      }
      .comments {
        padding-right: 10px;
        margin-top: 20px;
        color: #aaa;
        font-size: 12px
      }
      .comments span {
        margin-right: 10px
      }
    };
  }
}
</style>
